"use client"
import { Card, Row, Col, Typography, Divider, Space, Tag, Image } from 'antd';
import { 
  RocketOutlined, 
  HeartOutlined, 
  ShareAltOutlined,
  CodeOutlined,
  TeamOutlined,
  HighlightOutlined
} from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;

export default function AboutContent() {
  return (
    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 24px' }}>
      {/* 头部介绍 */}
      <Row justify="center" style={{ marginBottom: 60 }}>
        <Col xs={24} md={16} lg={12}>
          <div style={{ textAlign: 'center' }}>
            <Title level={1} style={{ marginBottom: 16 }}>
              关于我
            </Title>
            <Paragraph style={{ 
              fontSize: '18px', 
              color: '#666',
              lineHeight: 1.6 
            }}>
              一名热爱编程的技术博主，专注于分享实用的开发经验和最佳实践
            </Paragraph>
          </div>
        </Col>
      </Row>

      <Row gutter={[32, 32]}>
        <Col xs={24} lg={16}>
          <Card 
            style={{ marginBottom: 32 }}
            styles={{body: {padding: '32px'}}}
          >
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
              {/* 快速访问 */}
              <div>
                <Title level={2} style={{ marginBottom: 16 }}>
                  <RocketOutlined style={{ marginRight: 12, color: '#1890ff' }} />
                  快速访问
                </Title>
                <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                  <Col xs={24} md={12}>
                    <Card 
                      hoverable
                      style={{ 
                        height: '100%',
                        border: '1px solid #f0f0f0',
                        borderRadius: '8px',
                        transition: 'all 0.3s ease'
                      }}
                      styles={{
                        body: {
                          padding: '16px',
                          display: 'flex',
                          alignItems: 'flex-start'
                        }
                      }}
                      onClick={() => window.location.href = "/blog/java-stack/"}
                    >
                      <div style={{ 
                        width: 40, 
                        height: 40, 
                        borderRadius: '6px',
                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        marginRight: '12px',
                        flexShrink: 0
                      }}>
                        <Image src='/java-stack.svg' alt='java-stack' style={{ width: 24, height: 24, filter: 'brightness(0) invert(1)' }}/>  
                      </div>
                      <div style={{ flex: 1 }}>
                        <Text strong style={{ fontSize: '16px', display: 'block', marginBottom: '4px' }}>
                          Java技术栈
                        </Text>
                        <Text type="secondary" style={{ fontSize: '12px' }}>
                          Java虚拟机
                        </Text>
                      </div>
                    </Card>
                  </Col>
                  <Col xs={24} md={12}>
                    <Card 
                      hoverable
                      style={{ 
                        height: '100%',
                        border: '1px solid #f0f0f0',
                        borderRadius: '8px',
                        transition: 'all 0.3s ease'
                      }}
                      styles={{
                        body: {
                          padding: '16px',
                          display: 'flex',
                          alignItems: 'flex-start'
                        }
                      }}
                      onClick={() => window.location.href = "/blog/database/"}
                    >
                      <div style={{ 
                        width: 40, 
                        height: 40, 
                        borderRadius: '6px',
                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        marginRight: '12px',
                        flexShrink: 0
                      }}>
                        <Image src='/database.svg' alt='database' style={{ width: 24, height: 24, filter: 'brightness(0) invert(1)' }}/>  
                      </div>
                      <div style={{ flex: 1 }}>
                        <Text strong style={{ fontSize: '16px', display: 'block', marginBottom: '4px' }}>
                          数据库
                        </Text>
                        <Text type="secondary" style={{ fontSize: '12px' }}>
                          RocketMQ
                        </Text>
                      </div>
                    </Card>
                  </Col>
                </Row>
              </div>

              <Divider />
              {/* 技术理念 */}
              <div>
                <Title level={2} style={{ marginBottom: 16 }}>
                  <RocketOutlined style={{ marginRight: 12, color: '#52c41a' }} />
                  技术理念
                </Title>
                <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                  <Card size="small">
                    <Text strong>代码质量: </Text>
                    <Text type="secondary">
                      注重可读性、可维护性和可测试性，追求优雅的代码设计
                    </Text>
                  </Card>
                  <Card size="small">
                    <Text strong>持续学习: </Text>
                    <Text type="secondary">
                      技术更新迅速，保持学习是程序员的必备能力
                    </Text>
                  </Card>
                  <Card size="small">
                    <Text strong>实践导向: </Text>
                    <Text type="secondary">
                      理论结合实践，专注于解决真实世界的问题
                    </Text>
                  </Card>
                  <Card size="small">
                    <Text strong>分享精神: </Text>
                    <Text type="secondary">
                      知识因分享而更有价值，社区因贡献而更加强大
                    </Text>
                  </Card>
                </Space>
              </div>

              <Divider />

              {/* 博客使命 */}
              <div>
                <Title level={2} style={{ marginBottom: 16 }}>
                  <ShareAltOutlined style={{ marginRight: 12, color: '#faad14' }} />
                  博客使命
                </Title>
                <Paragraph style={{ fontSize: '16px', lineHeight: 1.8 }}>
                  创建这个博客的初衷是记录自己的学习历程，同时也希望能够帮助到
                  其他在技术道路上探索的开发者。每一篇文章都力求深入浅出，结合实际项目经验。
                </Paragraph>
              </div>

              {/* 引用区块 */}
              <Card 
                style={{ 
                  background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
                  border: 'none',
                  borderLeft: '4px solid #1890ff'
                }}
                styles={{body: {padding: '20px'}}}
              >
                <div style={{ display: 'flex', alignItems: 'flex-start' }}>
                  <HighlightOutlined style={{ 
                    fontSize: '24px', 
                    color: '#1890ff',
                    marginRight: '16px',
                    marginTop: '4px'
                  }} />
                  <div>
                    <Paragraph style={{ 
                      fontSize: '18px', 
                      fontStyle: 'italic',
                      color: '#2c3e50',
                      margin: 0,
                      lineHeight: 1.6
                    }}>
                      &quot;技术之路，与你同行。让我们在代码的世界里共同成长，创造更多可能。&quot;
                    </Paragraph>
                  </div>
                </div>
              </Card>

              <Divider />

              {/* 感谢访问 */}
              <div>
                <Title level={2} style={{ marginBottom: 16 }}>
                  <TeamOutlined style={{ marginRight: 12, color: '#eb2f96' }} />
                  感谢访问
                </Title>
                <Paragraph style={{ fontSize: '16px', lineHeight: 1.8 }}>
                  感谢你花时间阅读我的介绍。如果你对我的文章有任何建议，或者想要交流技术问题，
                  欢迎通过页面底部的联系方式找到我。
                </Paragraph>
              </div>
            </Space>
          </Card>
        </Col>

        <Col xs={24} lg={8}>
          {/* 侧边栏信息 */}
          <Space direction="vertical" style={{ width: '100%' }} size="large">
            {/* 技术栈 */}
            <Card 
              title={
                <span>
                  <CodeOutlined style={{ marginRight: 8 }} />
                  技术栈
                </span>
              }
            >
              <Space wrap size={[8, 8]} style={{ width: '100%' }}>
                <Tag color="blue">Java</Tag>
                <Tag color="green">Spring Boot</Tag>
                <Tag color="purple">React</Tag>
                <Tag color="orange">Next.js</Tag>
                <Tag color="red">MySQL</Tag>
                <Tag color="cyan">Redis</Tag>
                <Tag color="geekblue">Docker</Tag>
                <Tag color="volcano">Linux</Tag>
              </Space>
            </Card>

            {/* 个人标签 */}
            <Card
              title={
                <span>
                  <HeartOutlined style={{ marginRight: 8 }} />
                  个人标签
                </span>
              }
            >
              <Space direction="vertical" style={{ width: '100%' }} size="small">
                <div>
                  <Text strong>🛌 保持规律作息</Text>
                  <br />
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    充足的睡眠是高效编码的保障
                  </Text>
                </div>
                <Divider style={{ margin: '12px 0' }} />
                <div>
                  <Text strong>📚 持续学习</Text>
                  <br />
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    每天进步一点点，积累技术深度
                  </Text>
                </div>
                <Divider style={{ margin: '12px 0' }} />
                <div>
                  <Text strong>💡 解决问题</Text>
                  <br />
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    享受解决复杂技术问题的过程
                  </Text>
                </div>
              </Space>
            </Card>

            {/* 博客数据 */}
            <Card title="博客数据">
              <Space direction="vertical" style={{ width: '100%' }} size="middle">
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <Text>文章数量</Text>
                  <Text strong>7 篇</Text>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <Text>创建时间</Text>
                  <Text strong>2025 年</Text>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <Text>更新频率</Text>
                  <Text strong>每周更新</Text>
                </div>
              </Space>
            </Card>
          </Space>
        </Col>
      </Row>
    </div>
  );
}